Replace /stack with the Prisma Stack landing page - #8002

apps/site/src/app/stack/stack-diagram.tsx (2)

144-156: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick win

Resize handler is unthrottled and triggers a full SVG rebuild each call.

drawFlow reflows the DOM (multiple offsetWidth/offsetTop reads) and rewrites svg.innerHTML on every resize event, which can fire dozens of times per second during a drag-resize. Debouncing (e.g. rAF-batched or a short setTimeout debounce) would avoid layout-thrash on the hot resize path.

⚡ Suggested debounce

   useEffect(() => {
     drawFlow();
-    window.addEventListener("resize", drawFlow);
+    let raf = 0;
+    const onResize = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(drawFlow);
+    };
+    window.addEventListener("resize", onResize);
     if (document.fonts?.ready) document.fonts.ready.then(drawFlow);
     const t1 = setTimeout(drawFlow, 300);
     const t2 = setTimeout(drawFlow, 900);
     return () => {
-      window.removeEventListener("resize", drawFlow);
+      window.removeEventListener("resize", onResize);
+      cancelAnimationFrame(raf);
       clearTimeout(t1);
       clearTimeout(t2);
     };
   }, [drawFlow]);

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/site/src/app/stack/stack-diagram.tsx` around lines 144 - 156, The resize
path in stack-diagram.tsx is doing a full redraw on every window resize event
via drawFlow, which can cause layout thrash. Update the useEffect resize
listener to debounce or batch calls (for example with requestAnimationFrame or a
short timeout) so drawFlow runs at most once per resize burst, and make sure the
cleanup in the same effect cancels any pending scheduled redraws alongside
removing the listener.

---

295-295: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Add aria-hidden to the dynamically-built connector SVG.

The <svg ref={svgRef}> element's content is entirely decorative (connector lines/arrowheads injected via innerHTML) but lacks aria-hidden, so assistive tech may attempt to parse the injected path markup.

♿ Suggested fix

-          <svg className={styles["flow-svg"]} ref={svgRef} />
+          <svg className={styles["flow-svg"]} ref={svgRef} aria-hidden />

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/site/src/app/stack/stack-diagram.tsx` at line 295, The dynamically
generated connector SVG in stack-diagram.tsx is decorative only, so update the
SVG element rendered by the stack diagram component to include aria-hidden. Use
the existing svgRef-based element in the stack diagram render path and keep the
injected innerHTML connector markup unchanged; just mark the SVG as hidden from
assistive technology so screen readers ignore it.

apps/site/src/app/stack/reveal.tsx (1)

16-16: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

ref as never erases type safety for the polymorphic Tag.

Casting to never silences the compiler entirely rather than narrowing to a shared DOM type. Typing the ref as HTMLElement (the common ancestor of div/section) would keep type checking meaningful without the blunt cast.

♻️ Suggested tightening

-  const ref = useRef<HTMLDivElement>(null);
+  const ref = useRef<HTMLElement>(null);
...
-    <Tag ref={ref as never} className={`${styles.reveal} ${className ?? ""}`}>
+    <Tag ref={ref} className={`${styles.reveal} ${className ?? ""}`}>

Also applies to: 36-40

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/site/src/app/stack/reveal.tsx` at line 16, The polymorphic Tag ref
typing in reveal.tsx is being forced through a `never` cast, which bypasses
useful type checking. Update the `useRef`/`Tag` usage in the reveal component to
use a shared DOM type like `HTMLElement` instead of `HTMLDivElement` plus `ref
as never`, so the ref remains compatible across both `div` and `section`
variants. Make the same tightening where the ref is passed through the related
`Tag` render path so the compiler can still validate the element shape.

apps/site/src/app/stack/stack-data.ts (1)

1-28: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Consider whether framework accent colors should live in the design-token system.

Only the Next.js entry uses a semantic token (var(--color-foreground-neutral) / var(--color-background-neutral-weak)); every other framework hardcodes brand hex/rgba values. Since the PR emphasizes "semantic design tokens for light and dark theming," worth confirming these brand-specific hex codes are intentionally theme-agnostic (typical for logo brand colors) rather than an oversight.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/site/src/app/stack/stack-data.ts` around lines 1 - 28, The framework
color values in frameworks are mostly hardcoded brand hex/rgba strings while
only Next.js uses semantic tokens, so make the color source intentional and
consistent. If these badges should participate in light/dark theming, replace
the inline color/bg values with semantic design tokens; otherwise keep the brand
colors in a clearly separated brand palette and document that Framework entries
are intentionally theme-agnostic in stack-data.ts.

apps/site/src/app/stack/stack.module.css (1)

366-371: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Consider extending prefers-reduced-motion coverage to swap/hover transitions.

The reduced-motion block turns off .reveal and .fw-track, but the framework-swap opacity transitions (.ss-fw, .n-frontend .node-title) and the .node:hover transform are left active. These are auto-triggered by the diagram's cycling framework display rather than user scroll, so motion-sensitive users would still see them animate.

♻️ Suggested addition

 `@media` (prefers-reduced-motion: reduce) {
   .reveal {
     opacity: 1;
     transform: none;
     transition: none;
   }
   .fw-track {
     animation: none;
   }
+  .ss-fw,
+  .node-title,
+  .node {
+    transition: none;
+  }
 }

Also applies to: 79-83, 248-252, 440-449

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/site/src/app/stack/stack.module.css` around lines 366 - 371, The
reduced-motion styles in stack.module.css only disable `.reveal` and
`.fw-track`, but the framework swap and hover animations still run. Extend the
existing `prefers-reduced-motion` block to also neutralize the `.ss-fw` /
`.n-frontend .node-title` opacity transitions and the `.node:hover` transform so
the diagram’s auto-cycling framework display stays motion-free for sensitive
users.

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes